<template>
    <teleport to='body' v-if="show">
        <div class="fullDgWrap">
            <h5>请完善个人信息</h5>
            <div class="release-from">
                <div class="fromItem">
                    <div class="name">姓名</div>
                    <van-field v-model="fmData.name" placeholder="请输入姓名"/>
                </div>
                <div class="fromItem">
                    <div class="name">电话</div>
                    <van-field v-model="fmData.phone" placeholder="请输入电话"/>
                </div>
            </div>
            <div class="pfifBtnBox">
                <span @click="save">确定</span>
                <span class="cancel" @click="goBack">取消</span>
            </div>
        </div>
    </teleport>
</template>
<script>
import { Toast,Dialog,Field as vanField} from 'vant';
import { editUserInfo } from '@/api/index.js'
import Mixin from "cps/mixin";
export default {
    mixins: [Mixin],
    components:{
        vanField
    },
    props:{
        show: {
            type: Boolean,
            default: false
        },
        userData:Object
    },
    data(){
        return{
            fmData:{}
        }
    },
    async created(){
        this.fmData.name = this.userData.name
        this.fmData.phone = this.userData.phone
    },
    methods:{
        async save(){
            if(!this.fmData.name){
                return Toast('请输入姓名')
            }else if(!this.fmData.phone){
                return Toast('请输入电话')
            }else if(!this.checkMobile(this.fmData.phone)){
                return Toast('手机号输入有误')
            }
            const res  = await editUserInfo({
                _id:this.userData._id,
                ...this.fmData
            })
            if(res.code !=200){
                return Toast(res.message || '提交出错了！') 
            }
            this.$emit('update:show', false)
        },
        goBack(){
            uni.navigateBack({delta:1}) // 返回
        }
    }
}
</script>
<style lang="scss" scoped>
.fullDgWrap{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    width: 100%;
    height: 100%;
    background-color: rgb(252, 247, 238);
    h5{
        font-size: 28px;
        text-align: center;
        color: #e3af2f;
        font-weight: 600;
        padding: 20px;
    }
}
.release-from{
       .fromItem{
           padding:0 25px 50px 25px;
           margin: 25px 0 0 0;
           .name{
                display: flex;
                align-items: center;
                font-size: 28px;
                font-weight: bold;
                margin: 0 0 10px 0;
                &::before{
                    content: '';
                    display: block;
                    height: 24px;
                    width: 6px;
                    background: #e3af2f;
                    margin: 0 10px 0 0;
                }
           }
           input{
               width: 100%;
               height: 80px;
               line-height: 80px;
               padding: 20px;
               border: 0;
               background: #fff;
               border-radius: 10px;
           }
           textarea{
               border: 0;
               width: 100%;
               padding: 20px;
               background: #fff;
               height: 300px;
               border-radius: 10px;
           }
           .annexBox{
                padding: 15px 0 0 0;
           }
       } 
       .classifyBox{
           padding:0 25px;
           margin: 25px 0 0 0;
           h4{
               font-size: 34px;
           }
           .classifyList{
               padding: 25px 0 0 0;
               span{
                   float: left;
                   height: 64px;
                   line-height: 64px;
                   text-align: center;
                   border:1px solid #cccccc;
                   border-radius: 32px;
                   padding: 0 20px;
                   margin: 0 20px 20px 0;
                   &.selected{
                       background: #e3af2f;
                       color: #fff;
                   }
               }
           }
           .xzzj{
               margin: 10px -20px 0 -20px;
               .choise{
                   margin: 20px 0 0 20px;
                   width: 150px;
                   height: 150px;
                   border: 1px dashed #dbdada;
                   display: flex;
                   justify-content: center; 
                   align-items: center;
               }
           }
       }
}
.pfifBtnBox{
    display: flex;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    z-index: 2001;
    box-shadow: 0 0 10px #cccccc;
    background-color: #fff;
    a,span{
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
        font-size: 28px;
        background: #e3af2f;
        color: #fff;
        &.cancel{
            background-color: #f1efef;
            color: #999;
        }
    }
}
</style>